<template>
    <div>
        <div v-if="userStore.isLogin" v-loading="pager.loading">
            <div class="grid gap-x-4 grid-cols-3 3xl:grid-cols-4 6xl:grid-cols-5">
                <div
                    v-for="(item, index) in (pager.lists as RobotSmarterListResponse[])"
                    :key="index"
                    class="robot"
                    @click="router.push('/agent/robot/' + item.code)"
                >
                    <div class="flex gap-4">
                        <photos width="64px" height="64px" radius="6px" :src="item.logo" />
                        <div class="min-h-[90px] mr-[39px] mb-2">
                            <h2 class="title line-clamp-1">{{ item.name }}</h2>
                            <div class="intro line-clamp-2">{{ item.intro || '暂无介绍' }}</div>
                        </div>
                    </div>
                    <div class="flex items-center mb-2">
                        <span class="text-xs text-tx-placeholder">
                            {{ item?.models?.name || '-' }}·{{ item?.models?.model || '-' }}模型
                        </span>
                        <span class="divider"></span>
                        <span class="text-xs text-tx-placeholder">最近编辑 {{ item.update_time }}</span>
                    </div>
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="flex items-center gap-1">
                                <ElAvatar :size="16" :src="item?.user?.avatar" />
                                <span class="text-xs text-tx-placeholder">
                                    {{ item.user?.nickname }}
                                </span>
                            </div>
                            <div class="flex items-center gap-px text-tx-placeholder">
                                <icon name="el-icon-Lock" :size="12" />
                                <span class="ml-px text-xs">
                                    {{ item.is_owner ? '私有' : '仅协作' }}
                                </span>
                            </div>
                        </div>
                        <el-dropdown @command="handleCommand">
                            <icon name="el-icon-MoreFilled" color="#999" />
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item :command="beforeHandleCommand('dialogue', index)">
                                        <div class="flex items-center py-[2px]">
                                            <icon name="el-icon-ChatDotRound" />
                                            <span class="ml-1">去对话</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="beforeHandleCommand('square', index)" divided>
                                        <div class="flex items-center py-[2px]">
                                            <icon name="el-icon-Share"/>
                                            <span v-if="item.is_square === -1" class="ml-1">广场公开</span>
                                            <span v-else class="ml-1">取消公开</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="beforeHandleCommand('update', index)">
                                        <div class="flex items-center py-[2px]">
                                            <icon name="el-icon-Edit"/>
                                            <span class="ml-1">编辑信息</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="beforeHandleCommand('clone', index)">
                                        <div class="flex items-center py-[2px]">
                                            <icon name="el-icon-CopyDocument" />
                                            <span class="ml-1">创建副本</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="beforeHandleCommand('authority', index)" divided>
                                        <div class="flex items-center py-[2px]">
                                            <icon name="el-icon-Lock" />
                                            <span class="ml-1">权限</span>
                                        </div>
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="beforeHandleCommand('delete', index)" divided>
                                        <div class="flex items-center py-[2px]">
                                            <icon name="el-icon-Delete" />
                                            <span class="ml-1">删除</span>
                                        </div>
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>

                    <div class="absolute top-[4px] right-[6px]">
                        <el-tooltip
                            v-if="item.is_square === 1 || item.is_square === -2"
                            effect="dark"
                            placement="top"
                            :content="item.is_square === -2
                                ? '已公开至广场 (但被隐藏了)'
                                : '您的智能体已公开至广场了'"
                        >
                            <el-tag
                                type="primary"
                                effect="light"
                                size="small"
                            >公开</el-tag>
                        </el-tooltip>

                        <el-tooltip
                            v-if="item.is_square === 0"
                            effect="dark"
                            content="审核通过后您的智能体将出现在广场中"
                            placement="top"
                        >
                            <el-tag
                                type="warning"
                                effect="light"
                                size="small"
                            >审核中</el-tag>
                        </el-tooltip>
                    </div>
                </div>
            </div>

            <div
                v-if="pager.lists.length === 0 && !pager.loading"
                class="pt-14 w-full h-full"
            >
                <el-empty v-if="owner === 'cooperate'" description="暂无协作的智能体" />
                <el-empty v-else description="暂无智能体，创建一个吧!" />
            </div>

            <div v-if="pager.lists.length >= pager.limit" class="flex justify-center my-4">
                <paging
                    v-model="pager"
                    layout="prev, pager, next"
                    @change="queryLists"
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import feedback from '~/utils/feedback'
import useUserStore from '~/stores/user'
import chatRoomingApi from '~/api/agent/chat/rooming'
import robotSmarterApi from '~/api/agent/robot/smarter'

const emits = defineEmits(['complete'])
const props = defineProps({
    // 刷新列表
    refresh: {
        type: Boolean,
        default: false
    },
    // 关键词
    keyword: {
        type: String,
        default: ''
    },
    // 权限: [all=全部,private=私有,cooperate=协作]
    owner: {
        type: String,
        default: ''
    }
})

const router = useRouter()
const userStore = useUserStore()

// 查询参数
const queryParams = reactive({
    owner: props.owner,
    keyword: props.keyword
})

// 分页查询
const { pager, queryLists, resetPaging } = usePaging({
    fetchFun: robotSmarterApi.lists,
    params: queryParams
})

/**
 * 指令对象
 *
 * @param command
 * @param index
 * @author zero
 */
const beforeHandleCommand = (command: string, index: number) => {
    return {
        command,
        index
    }
}

/**
 * 指令操作
 *
 * @param d
 * @author zero
 */
const handleCommand = async (d: any) => {
    const command: string = d.command
    const index: number = d.index
    const botCode: string = pager.lists[index].code
    const square: number = pager.lists[index].is_square
    switch (command) {
        case 'dialogue':
            await chatRoomingApi.create(botCode)
            await router.push('/chats')
            break
        case 'authority':
            await router.push('/agent/robot/' + botCode + '?currentTab=teamed')
            break
        case 'update':
            await router.push('/agent/robot/' + botCode)
            break
        case 'clone':
            feedback.confirm('您确定要克隆该智能体吗?')
                .then(async () => {
                    await robotSmarterApi.clone(botCode)
                    await resetPaging()
                }).catch(() => {})
            break
        case 'delete':
            feedback.confirm('您确定要删除吗?')
                .then(async () => {
                    await robotSmarterApi.delete(botCode)
                    await resetPaging()
                    feedback.msgSuccess('删除成功')
                }).catch(() => {})
            break
        case 'square':
            let message = ''
            if (square === -1) {
                message = '您确定要公开该智能体至广场吗？'
            } else if (square === 0) {
                message = '您的申请正在审核中，您要取消吗？'
            } else {
                message = '您确定要取消广场公开吗？'
            }

            feedback.confirm(message).then(
                async () => {
                    await robotSmarterApi.square(botCode)
                    await resetPaging()
                    feedback.msgSuccess('操作成功')
                }).catch(() => {})

            break
    }
}

watch(
    () => props.refresh,
    async () => {
        emits('complete')
        queryParams.owner = props.owner
        queryParams.keyword = props.keyword
        if (userStore.isLogin) {
            await resetPaging()
        }
    }, {
        immediate: true
    }
)

watch(
    () => props.owner,
    async () => {
        emits('complete')
        queryParams.owner = props.owner
        await resetPaging()
    }
)
</script>

<style scoped lang="scss">
.robot {
    position: relative;
    width: 100%;
    padding: 20px 20px 16px;
    margin-bottom: 16px;
    overflow: hidden;
    cursor: pointer;
    background: var(--el-bg-color);
    border-radius: 8px;
    box-shadow: 0 6px 8px 0 rgb(28 31 35 / 6%);
    &:hover {
        box-shadow: 0 6px 8px 0 rgb(28 31 35 / 12%);
    }
    .title {
        height: 24px;
        font-size: 18px;
        font-weight: 600;
        line-height: 24px;
    }
    .intro {
        display: -webkit-box;
        width: 100%;
        height: 40px;
        margin-top: 6px;
        overflow: hidden;
        font-size: 13px;
        font-weight: 400;
        line-height: 20px;
        color: var(--el-text-color-secondary);
        -webkit-box-orient: vertical;
    }
    .divider {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        margin: 0 6px;
        &::before {
            display: block;
            width: 3px;
            height: 3px;
            content: "";
            background-color: var(--el-text-color-secondary);
            border-radius: 50%;
        }
    }
}

:deep(.el-dropdown-menu__item) {
    margin: 5px;
    border-radius: 6px;
}
</style>
